<script setup>
import { ref, onMounted, toRefs, watch, computed } from 'vue'
import { objextend } from '@/js/function.js'
import { VueDraggable } from 'vue-draggable-plus'
import {unit2} from './unit.js'
import mobileDraggable from './mobile.vue';
const props = defineProps({
    title: String,
    config: {
        type: Object,
        default: {}
    },
    modelValue: {
        type: Array,
        default: []
    },
    activeRow: {
        type: Object,
        default: {}
    },
    views: Object
});
//需要响应式时使用toRefs
const { config, activeRow } = toRefs(props);
//向父级传递消息
const emits = defineEmits(['tohost','update:modelValue', 'update:activeRow'])
function sindEmit() {
    emits('tohost', ...arguments);
}
onMounted(() => {
})
const mobileConfig = computed({
  get: () => props.modelValue,
  set: value => emits('update:modelValue', value)
})


function onRow(item) {
    // activeRow.value = item;
    emits('update:activeRow', item);
    // objextend(activeRow.value, item)
    // optionShow.value.show = false;
}
function onDragStart(ev) {
    // if(ev.from.classList.contains('mobile')){
        // activeRow.value = {};
        // activeRow.value.key = ''
    // }
}

// 递归更新 key 的方法
function updateAllKeys(node, prefix) {
    const newKey = `${node.path}${Math.random().toString(36).slice(-5)}`;
    node.key = newKey;

    if (node.children && Array.isArray(node.children)) {
      node.children.forEach(child => {
        updateAllKeys(child, newKey);
      });
    }
}
function onCopy(index) {
    var source = JSON.parse(JSON.stringify(mobileConfig.value[index]));
    updateAllKeys(source);
    mobileConfig.value.splice(index+1, 0, source);
}
function onDelete(index) {
    mobileConfig.value.splice(index, 1);
}


</script>
<template>
    <VueDraggable v-model="mobileConfig" animation="150" group="people"
        handle=".dragmove" @start="onDragStart">
        <div :class="['itemrow', {mTitle:item.type=='title'}, { active: item.key == activeRow.key }]" v-for="(item, index) in mobileConfig" :key="item.key"
            @click.stop="onRow(item)" :style="
                item.path!='container'?
                { padding: config.padding1 + 'px ' + config.padding2 + 'px'}:
                {
                    width: unit2(item.width, item.width_unit),
                    height: unit2(item.height, item.height_unit),
                    fontSize: unit2(item.fontSize, 'px'),
                    color: item.color,
                    backgroundColor: item.backgroundColor,
                    backgroundImage: `url(${item.bg})`,
                    padding: `${unit2(item.paddingTop, 'px')} ${unit2(item.paddingRight, 'px')} ${unit2(item.paddingBottom, 'px')} ${unit2(item.paddingLeft, 'px')}`,
                    margin: `${unit2(item.marginTop, 'px')} ${unit2(item.marginRight, 'px')} ${unit2(item.marginBottom, 'px')} ${unit2(item.marginLeft, 'px')}`,
                    borderColor: item.borderColor,
                    borderStyle: 'solid',
                    borderWidth: unit2(item.borderWidth, 'px'),
                    borderRadius: unit2(item.borderRadius, 'px'),
                }
            ">

            <component :is="views[item.path]" :config="item">
            </component>

            <div :class="['tag dragmove ellipsis', {container_tag:item.path=='container'}]"><i :class="['fa', item.icon]"></i> {{ item.title }}</div>
            <div class="btncon" v-show="item.key == activeRow.key">
                <div class="handle" title="复制" @click="onCopy(index)"><i class="fa fa-copy"></i></div>
                <div class="handle" title="删除" @click="onDelete(index)"><i class="fa fa-trash-o"></i></div>
            </div>

            <mobile-draggable v-if="item.path=='container'" class="m-container" 
            :config="config" v-model="item.children" :activeRow="activeRow" @update:activeRow="onRow($event)" :views="views" style="height: 100%;"></mobile-draggable>

        </div>
    </VueDraggable>
</template>
<style scoped>

.itemrow.active,.itemrow:hover{box-shadow: 0 0 0 1px #2c82e5;}
.itemrow.active> .tag,.itemrow:hover> .tag{display: block;}
.itemrow.active> .tag{z-index: 100;}
.itemrow> .tag{
	position: absolute;left: -80px;top: 0; display: none;
	width: 80px;height: 30px;line-height: 30px;padding: 0 0.3em;
	background-color: #aaa;color: white;
	box-shadow: -6px 8px 10px -6px rgba(0, 52, 112, 0.4);
}
.itemrow> .tag:hover{background-color: #5e8dbe}
.itemrow.active> .tag{background-color: #2c82e5;}
.itemrow> .btncon{position: absolute;right: -40px;top: 0;width: 40px;z-index: 9;}
.itemrow> .btncon>*{margin-bottom: 5px; width: 100%;color: white;background-color: #2c82e5; text-align: center;}
.itemrow> .btncon>*:hover{background-color: #52a3ff;
	box-shadow: 10px 0 20px rgba(0,0,0,.1);}

.itemrow> .container_tag{display: none;left: 0; top: -30px;box-shadow: none;border: white 1px solid;}
.itemrow:hover> .container_tag{display: block; background-color: orange;}
/* .itemrow:hover> :deep(.container-hover){height: 30px !important;} */

.mTitle + * {padding-top: 0 !important;}


</style>
<style>
</style>